<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script>
    const total = 10000;
    const arr = []

    function generateArr() {
      for (let i = 0; i < total; i++) {
        arr.push(function () {
          document.body.innerHTML += `<div>${i+1}</div>`
        })
      }
    }
    generateArr()

    for (let i = 0; i < total; i++) {
      arr[i]()
    }

    function workLoop(time) {
      if (time.timeRemaining() > 1 && arr.length > 0) {
        const fn = arr.shift()
        fn()
      }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
      requestIdleCallback(workLoop)
    }

    requestIdleCallback(workLoop, { timeout: 1000 })
  </script>
</body>
</html>